<template>
  <div class="home">
    <!-- 搜索框组件 -->
    <van-sticky>
      <app-server class="server" />
    </van-sticky>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#F8F8FF">
      <van-swipe-item v-for="item in banner" :key="item._id">
        <!-- 图片懒加载 -->
        <img v-lazy="item.pictureUrl" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- nav导航 -->
    <van-grid :column-num="4" class="nav" :border="false">
      <van-grid-item v-for="item in navlist" :key="item._id" class="navlist">
        <img v-lazy="item.pictureUrl" alt="" />
        <span>{{ item.navName }}</span>
      </van-grid-item>
    </van-grid>
    <!-- 秋日食谱计划 -->
    <div class="go">
      <img src="../../public/img/go.jpg" alt="" />
    </div>
    <!-- 重磅推荐 -->
    <div class="tuijian">
      <img src="../../public/img/tuijian.jpg" alt="" />
    </div>
    <!-- 商品轮播部分 -->
    <div class="goodsnav">
      <van-swipe
        :width="130"
        class="goodsswipe"
        :show-indicators="false"
        :loop="false"
      >
        <van-swipe-item
          class="swipe-item"
          v-for="item in goodsswipe"
          :key="item._id"
          @click="goto(item._id)"
        >
          <img v-lazy="item.pictureUrl" alt />
          <p>{{ item.commodityName }}</p>
          <span>{{ item.commodityPrice }}</span>
          <i class="ico"></i>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 每日惊喜 -->
    <div class="con">
      <div class="top">
        <img src="../../public/img/jingxi.jpg" alt="" />
      </div>
      <div class="center">
        <img src="../../public/img/qiang.jpg" alt="" />
      </div>
      <div class="botton">
        <img src="../../public/img/heng.jpg" alt="" />
      </div>
    </div>
    <!-- 精选零食 -->
    <div class="blockwrap">
      <h3 class="tt">精选零食</h3>
      <van-grid :column-num="2" :border="false" class="haixian">
        <van-grid-item
          v-for="item in haixian"
          :key="item._id"
          class="haixian-item"
        >
          <img v-lazy="item.pictureUrl" alt />
          <div class="info">
            <p>{{ item.commodityName }}</p>
            <div class="icon">
              <span>{{ item.commodityPrice }}</span>
              <i class="ico"></i>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 页脚 -->
    <div class="pagefooter">
      <p>沪IPC备09008015号</p>
      <p>上海易果电子商务有限公司</p>
    </div>
    <!-- 底部导航组件 -->
    <app-tabbar />
  </div>
</template>
<script>
import Vue from "vue";
import appServer from "../components/Server.vue";
import appTabbar from "../components/Tabbar.vue";
// console.log(appTabbar);

export default {
  name: "Home",
  components: {
    appServer,
    appTabbar,
  },
  data() {
    return {
      banner: [],
      navlist: [],
      goodslist: [],
      goodsswipe: [], // 商品轮播
      haixian: [], //海鲜商品列表
    };
  },
  methods: {
    
  },
  // 导航菜单
  async created() {
    const { data: nav } = await this.$request.get("/good/nav", {
      params: {},
    });
    // console.log(nav.data)
    this.navlist = nav.data;
    // banner图
    const { data: list } = await this.$request.get("/good/banner", {
      params: {},
    });
    // console.log(list.data)
    this.banner = list.data;
    // 商品轮播  重磅推荐
    const { data: goodsswipe } = await this.$request.get("/good/goodsswipe", {
      params: {},
    });
    this.goodsswipe = goodsswipe.data;
    // 水产
    const { data: haixian } = await this.$request.get("/good/haixian", {
      params: {
        size: 34,
      },
    });
    // console.log(haixian.data);
    this.haixian = haixian.data;
  },
};
</script>
<style lang="scss">
@import "../assets/sass/vw.scss";
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #f5f5f5;
}
.my-swipe {
  img {
    height: vw(217.39);
    width: vw(375);
  }
}
// 导航宫格
  
.nav{
  .navlist {
     width: vw(375.2);
  height: vw(197.65);
  width: vw(90.8);
  height: vw(85.8);
  img {
    width: vw(61.89);
    height: vw(61.89);
  }
  span {
    margin-top: vw(5);
    font-size: vw(14);
    color: #4d4d4d;
    display: block;
  }
}
}

// 秋日食谱计划
.go {
  height: vw(114.73);
  width: vw(375.2);
  img {
    height: vw(114.73);
    width: vw(375.2);
  }
}
// 重磅推荐
.tuijian {
  height: vw(217.39);
  width: vw(375.2);
  img {
    height: vw(217.39);
    width: vw(375.2);
  }
}
// 商品轮播
.goodsnav {
  height: vw(180.68);
  width: vw(375.2);
}
.goodsswipe {
  height: vw(180.68);
  width: vw(375.2);
  background: #fff;
  .swipe-item {
    height: vw(174.09);
    width: vw(124.64);
    border-radius: vw(10);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    vertical-align: middle;
    margin-right: vw(8);
    overflow: hidden;
    img {
      width: vw(124.09);
      height: vw(124.09);
    }
    p {
      font-size: vw(11);
      width: vw(110);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #333;
    }
    span {
      color: #f00;
      font-size: vw(12);
      &::before {
        content: "￥";
      }
    }
    .ico {
      display: block;
      width: vw(15);
      height: vw(15);
      background: url(../../public/img/ksgw.png) no-repeat;
      background-size: 100% 100%;
      float: right;
      border-radius: 50%;
      background-color: #01b27a;
    }
  }
}
// 每日惊喜
.top {
  height: vw(45.69);
  width: vw(375.2);
  img {
    height: vw(45.69);
    width: vw(375.2);
  }
}
.center {
  height: vw(151.74);
  width: vw(375.2);

  img {
    height: vw(151.74);
    width: vw(375.2);
  }
}
.botton {
  height: vw(8.66);
  width: vw(375.2);
  img {
    height: vw(8.66);
    width: vw(375.2);
  }
}
// 零食
.blockwrap {
  .tt {
    height: vw(51.33);
    text-align: center;
    line-height: vw(51.33);
    width: vw(375.2);
  }
  .haixian-item {
    height: vw(226.43);
    width: vw(166.79);
    border-radius: vw(10);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    vertical-align: middle;
    overflow: hidden;
    -webkit-box-shadow: 0 0 vw(5) rgba(0, 0, 0, 0.1);
    background: #fff;
    img {
      height: vw(166.79);
      width: vw(166.04);
    }
    p {
      font-size: vw(11);
      width: vw(110);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #333;
    }
    span {
      color: #f00;
      font-size: vw(12);
      &::before {
        content: "￥";
      }
    }
    .ico {
      display: block;
      width: vw(20);
      height: vw(20);
      background: url(../../public/img/ksgw.png) no-repeat;
      background-size: 100% 100%;
      float: right;
      border-radius: 50%;
      background-color: #01b27a;
    }
  }
}
// 页脚
.pagefooter {
  height: vw(100);
  text-align: center;
  p {
    font-size: 12px;
    color: #8d8a8a;
    line-height: 12px;
    margin: 0;
    padding: 4px;
  }
}
.aquatic {
  background-color: #fafafa;
}
.pagefooter {
  background-color: #fafafa;
}
</style>
